<!-- <!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>高雯玥生日快乐</title>
    <style>
        body, html {
            margin: 0;
            padding: 0;
            width: 100%;
            height: 100%;
            overflow: hidden;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            background: black;
        }
        .page {
            display: none;
            width: 100%;
            height: 100%;
            justify-content: center;
            align-items: center;
            flex-direction: column;
            position: relative;
        }
        .page.active {
            display: flex;
        }
        .birthday-message {
            font-size: 3em;
            color: black;
            text-align: center;
            position: absolute;
            top: 10%;
            left: 50%;
            transform: translateX(-50%);
            z-index: 1;
        }
        .typewriter {
            font-size: 2em;
            color: white;
            border-right: 2px solid white;
            white-space: pre-wrap;
            overflow: hidden;
            max-width: 90%;
            text-align: center;
            margin: 0 auto;
            position: relative;
            z-index: 2;
        }
        .content {
            font-size: 2em;
            color: white;
            text-align: center;
            z-index: 2; /* 确保文字在视频之上 */
        }
        .page3 .content {
            color: black;
        }
        .button {
            padding: 10px 20px;
            font-size: 1.5em;
            color: white;
            background: linear-gradient(45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
            background-size: 400% 400%;
            animation: gradientBG 15s ease infinite;
            border: none;
            border-radius: 50px;
            opacity: 0.8;
            cursor: pointer;
            z-index: 2; /* 确保按钮在视频之上 */
        }
        .button:hover {
            color: #000;
        }
        @keyframes gradientBG {
            0% { background-position: 0% 50%; }
            50% { background-position: 100% 50%; }
            100% { background-position: 0% 50%; }
        }
        .background-video {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            z-index: 0;
        }
        .page3 {
            background: url('a.jpg') no-repeat center center;
            background-size: cover;
        }
        .page4 {
            background: url('a.png') no-repeat center center;
            background-size: cover;
        }
        .page5 {
            background: url('b.png') no-repeat center center;
            background-size: cover;
        }
        /* 响应式设计 */
        @media (max-width: 768px) {
            .birthday-message {
                font-size: 2em;
            }
            .typewriter {
                font-size: 1em;
            }
            .content {
                font-size: 1em;
            }
            .button {
                padding: 5px 10px;
                font-size: 1em;
            }
        }
    </style>
</head>
<body>
    <audio autoplay>
        <source src="MP3/song.mp3" type="audio/mpeg">
    </audio>
    <div class="page active" id="page1">
        <video autoplay loop muted class="background-video">
            <source src="background.mp4" type="video/mp4">
        </video>
        <div class="birthday-message">高雯玥生日快乐</div>
    </div>
    <div class="page" id="page2">
        <video autoplay loop muted class="background-video">
            <source src="background2.MP4" type="video/mp4">
        </video>
        <div class="typewriter" id="typewriter"></div>
    </div>
    <div class="page page3" id="page3">
        <div class="content">在这个特别的日子里，恭喜你迎来了新的生日！期待你在新的一岁里，继续绽放光彩，追逐梦想。愿每一个日子都充满惊喜与快乐，每一步旅程都更加精彩纷呈。期待这一年带给你更多的美好回忆和难忘瞬间。</div>
    </div>
    <div class="page" id="page4" style="background: url('a.png') no-repeat center center; background-size: cover;">
        <div class="content">成长历程</div>
        <button class="button" onclick="window.location.href='XC.html'">Picutres</button>
    </div>
    <div class="page" id="page5">
        <video autoplay loop muted class="background-video">
            <source src="e.mp4" type="video/mp4">
        </video>
        <div class="content">Pictures you like</div>
        <button class="button" onclick="navigateToPage('XC2.html')">→(◉ω◉)←</button>
    </div>
    <div class="page" id="page6">
        <video autoplay loop muted class="background-video">
            <source src="c.mp4" type="video/mp4">
        </video>
        <div class="content">13岁生日快乐！看个烟花？</div>
        <button class="button" onclick="navigateToPage('fireworks/fireworks.html')">看烟花</button>
    </div>

    <script>
        // 打字机效果
        const typewriter = document.getElementById('typewriter');
        const text = '在这个特别的日子里，你又完成了一年的成长与挑战，迈向新的篇章。恭喜！';
        let index = 0;
        function typeWriter() {
            if (index < text.length) {
                typewriter.textContent += text.charAt(index);
                index++;
                setTimeout(typeWriter, 200);
            }
        }

        // 页面滑动效果
        let currentPage = 1;
        function goToPage(page) {
            document.getElementById('page' + currentPage).classList.remove('active');
            document.getElementById('page' + page).classList.add('active');
            currentPage = page;
            if (page === 2) {
                typeWriter();
            }
            // 当滑动到最后一页时，将页数设置为6
            if (page === 6) {
                currentPage = 6; // 修改这里，不再重置为1
            }
        }

        window.onload = function () {
            // 检查是否有存储的页数，如果有，则跳转到该页
            const storedPage = localStorage.getItem('currentPage');
            if (storedPage) {
                goToPage(parseInt(storedPage));
            } else {
                goToPage(1);
            }
        };

        // 添加触摸滑动事件
        let touchStartY = 0;
        let touchEndY = 0;
        document.addEventListener('touchstart', function(event) {
            touchStartY = event.touches[0].clientY;
        }, false);
        document.addEventListener('touchend', function(event) {
            touchEndY = event.changedTouches[0].clientY;
            handleSwipe();
        }, false);

        function handleSwipe() {
            if (touchEndY < touchStartY) {
                // 向上滑动
                if (currentPage < 6) {
                    goToPage(currentPage + 1);
                }
            } else if (touchEndY > touchStartY) {
                // 向下滑动
                if (currentPage > 1) {
                    goToPage(currentPage - 1);
                }
            }
        }

        // 导航到其他页面，并存储当前页数
        function navigateToPage(url) {
            localStorage.setItem('currentPage', currentPage);
            window.location.href = url;
        }
    </script>
</body>
</html> -->
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>高雯玥生日快乐</title>
    <style>
        body, html {
            margin: 0;
            padding: 0;
            width: 100%;
            height: 100%;
            overflow: hidden;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            background: black;
        }
        .page {
            display: none;
            width: 100%;
            height: 100%;
            justify-content: center;
            align-items: center;
            flex-direction: column;
            position: relative;
        }
        .page.active {
            display: flex;
        }
        .birthday-message {
            font-size: 3em;
            color: black;
            text-align: center;
            position: absolute;
            top: 10%;
            left: 50%;
            transform: translateX(-50%);
            z-index: 1;
        }
        .typewriter {
            font-size: 2em;
            color: white;
            border-right: 2px solid white;
            white-space: pre-wrap;
            overflow: hidden;
            max-width: 90%;
            text-align: center;
            margin: 0 auto;
            position: relative;
            z-index: 2;
        }
        .content {
            font-size: 2em;
            color: white;
            text-align: center;
            z-index: 2;
        }
        .page3 .content {
            color: black;
            opacity: 0;
            transition: opacity 2s ease-in-out;
        }
        .button {
            padding: 10px 20px;
            font-size: 1.5em;
            color: white;
            background: linear-gradient(45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
            background-size: 400% 400%;
            animation: gradientBG 15s ease infinite;
            border: none;
            border-radius: 50px;
            opacity: 0.8;
            cursor: pointer;
            z-index: 2;
        }
        .button:hover {
            color: #000;
        }
        @keyframes gradientBG {
            0% { background-position: 0% 50%; }
            50% { background-position: 100% 50%; }
            100% { background-position: 0% 50%; }
        }
        .background-video {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            z-index: 0;
        }
        .page3 {
            background: url('a.jpg') no-repeat center center;
            background-size: cover;
        }
        .page4 {
            background: url('a.png') no-repeat center center;
            background-size: cover;
        }
        .page5 {
            background: url('b.png') no-repeat center center;
            background-size: cover;
        }
        @media (max-width: 768px) {
            .birthday-message {
                font-size: 2em;
            }
            .typewriter {
                font-size: 1em;
            }
            .content {
                font-size: 1em;
            }
            .button {
                padding: 5px 10px;
                font-size: 1em;
            }
        }
    </style>
</head>
<body>
    <audio autoplay>
        <source src="MP3/song.mp3" type="audio/mpeg">
    </audio>
    <div class="page active" id="page1">
        <video autoplay loop muted class="background-video">
            <source src="background.mp4" type="video/mp4">
        </video>
        <div class="birthday-message">高雯玥生日快乐</div>
    </div>
    <div class="page" id="page2">
        <video autoplay loop muted class="background-video">
            <source src="background2.MP4" type="video/mp4">
        </video>
        <div class="typewriter" id="typewriter"></div>
    </div>
    <div class="page page3" id="page3">
        <div class="content">在这个特别的日子里，恭喜你迎来了新的生日！期待你在新的一岁里，继续绽放光彩，追逐梦想。愿每一个日子都充满惊喜与快乐，每一步旅程都更加精彩纷呈。期待这一年带给你更多的美好回忆和难忘瞬间。</div>
    </div>
    <div class="page" id="page4" style="background: url('a.png') no-repeat center center; background-size: cover;">
        <div class="content">成长历程</div>
        <button class="button" onclick="window.location.href='XC.html'">Picutres</button>
    </div>
    <div class="page" id="page5">
        <video autoplay loop muted class="background-video">
            <source src="e.mp4" type="video/mp4">
        </video>
        <div class="content">Pictures you like</div>
        <button class="button" onclick="navigateToPage('XC2.html')">→(◉ω◉)←</button>
    </div>
    <div class="page" id="page6">
        <video autoplay loop muted class="background-video">
            <source src="c.mp4" type="video/mp4">
        </video>
        <div class="content">13岁生日快乐！看个烟花？</div>
        <button class="button" onclick="navigateToPage('fireworks/fireworks.html')">看烟花</button>
    </div>

    <script>
        const typewriter = document.getElementById('typewriter');
        const text = '在这个特别的日子里，你又完成了一年的成长与挑战，迈向新的篇章。恭喜！';
        let index = 0;
        function typeWriter() {
            if (index < text.length) {
                typewriter.textContent += text.charAt(index);
                index++;
                setTimeout(typeWriter, 200);
            }
        }

        let currentPage = 1;
        function goToPage(page) {
            document.getElementById('page' + currentPage).classList.remove('active');
            document.getElementById('page' + page).classList.add('active');
            currentPage = page;
            if (page === 2) {
                typeWriter();
            }
            if (page === 3) {
                setTimeout(function() {
                    document.querySelector('.page3 .content').style.opacity = 1;
                }, 500);
            }
            if (page === 6) {
                currentPage = 6;
            }
        }

        window.onload = function () {
            const storedPage = localStorage.getItem('currentPage');
            if (storedPage) {
                goToPage(parseInt(storedPage));
            } else {
                goToPage(1);
            }
        };

        let touchStartY = 0;
        let touchEndY = 0;
        document.addEventListener('touchstart', function(event) {
            touchStartY = event.touches[0].clientY;
        }, false);
        document.addEventListener('touchend', function(event) {
            touchEndY = event.changedTouches[0].clientY;
            handleSwipe();
        }, false);

        function handleSwipe() {
            if (touchEndY < touchStartY) {
                if (currentPage < 6) {
                    goToPage(currentPage + 1);
                }
            } else if (touchEndY > touchStartY) {
                if (currentPage > 1) {
                    goToPage(currentPage - 1);
                }
            }
        }

        function navigateToPage(url) {
            localStorage.setItem('currentPage', currentPage);
            window.location.href = url;
        }
    </script>
</body>
</html>
